<template>
    <div class="middle-right check-div">
        <div class="check">
            <h2 @click='fillStaffCheck()'>刘琛的综合评定</h2>
            <p class="score">{{selfScore}}</p>
            <p class="score-title">Total score</p>
            <ul class="score-img-ul">
                <!-- 21个li 270度角 间隔为 13.5 -->
                <li v-for = "n in 21" style="transform: rotate({{ -135 + n * 13.5}}deg); background-color:rgb({{parseInt((startColor.r * n + endColor.r * (liNum - n)) / liNum)}}, {{parseInt((startColor.g * n + endColor.g * (liNum - n)) / liNum)}}, {{parseInt((startColor.b * n + endColor.b * (liNum - n)) / liNum)}});display:{{ n < liNum ? 'block' : 'none'}} "></li>
            </ul>
            <ul class="score-ul">
                <li>
                    <p class="li-score">{{firstFactor}}</p>
                    <p class="li-title">博文被浏览次数</p>
                </li>
                <li>
                    <p class="li-score">{{secondFactor}}</p>
                    <p class="li-title">博文被点赞次数</p>
                </li>
                <li>
                    <p class="li-score">{{thirdFactor}}</p>
                    <p class="li-title">博文被评论次数</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="sass">
    /*综合评定*/
    .check-div{
        padding: 0;
    }
    .check{
        height: 500px;
        background-color: #2d3039;
        position: relative;
    }

    .check h2{
        color: #ededed;
        font-size: 22px;
        position: absolute;
        top: 50px;
        left: 40px;
        margin:0;
    }
    .check .score{
        font-size: 80px;
        color: #fff;
        text-align: center;
        padding:130px 0 0 0;
        margin:0;
    }
    .check .score-num{
        color: #dedede;
        font-size: 14px;
        position: absolute;
        top: 205px;
        left: 51%;
        transform:translateX(200%);
    }

    .check .score-title{
        font-size: 24px;
        color: #fff;
        text-align: center;
        margin:-15px;
    }
    .check ul.score-ul{
        width: 491px;
        margin: 75px auto;
        text-align: center;
    }
    .check ul.score-ul li{
        float: left;
        width: 163px;
        border-left: 1px solid #fff
    }
    .check ul.score-ul li:first-child{
        border: none;
    }
    .check ul.score-ul p.li-score{
        font-size: 36px;
        color: #fff;
    }
    .check ul.score-ul p.li-title{
        clear: both;
        font-size: 18px;
        color: #fff;
    }

    .check ul.score-ul img{
        float: left;
        margin: 10px 0 0 20px;
    }

    .check ul.score-img-ul{
        position: absolute;
        top: 70px;
        left: 50%;
    }
    .check ul.score-img-ul li{
        position: absolute;
        top:0;
        left: 0;
        display: none;
        width: 5px;
        height: 25px;
        background-color: #fff;


        transform: rotate(30deg);
        transform-origin:50% 550%;
    }
</style>

<script>

    export default{
        data(){
            return{
                item:           '成绩系统',
                firstFactor:    -1,
                secondFactor:   -1,
                thirdFactor:    -1,
                selfScore:      200,
                maxScore:       300,
                startColor :    {r:0,g:255,b:0},
                endColor :      {r:255,g:0,b:0},
                total:          10,
                rank:           5

            }
        },
        computed:{
            liNum : function(){
                return this.selfScore / this.maxScore * 21;
            },
            selfScore : function(){
                return this.firstFactor + this.secondFactor + this.thirdFactor;
            },
            maxScore : function(){
                return this.firstFactorMax + this.secondFactorMax + this.thirdFactorMax;
            }
        },
        ready(){
            // 获取作业信息
            this.$http.post('/admin/grade/homeworkscore').then(function (d) {
                console.log(d.data);
            }, function (err) {
                console.log(err);
            }),
            this.$http.get('/blog/getBlogScore').then(function(data){

                this.firstFactor     = data.data.data.visitedNum.value;
                this.secondFactor    = data.data.data.thumbedNum.value;
                this.thirdFactor     = data.data.data.commentedNum.value;
                this.firstFactorMax  = data.data.data.visitedNum.max;
                this.secondFactorMax = data.data.data.thumbedNum.max;
                this.thirdFactorMax  = data.data.data.commentedNum.max;

            }, function(err){
                console.log(err);
            })
        },
        methods:{
            fillStaffCheck : function(){
                console.log(this.selfScore);
                console.log(this.maxScore);
            }
        }
    }
</script>
